@import '@wordpress/base-styles/colors';

.agents-manager-conversation-history-view {
	display: flex;
	flex-direction: column;
	flex: 1;
	width: 100%;
	min-height: 0;

	&__content {
		flex: 1;
		overflow-y: auto;
		overflow-x: hidden;
		min-height: 0;
		padding: 0 8px 24px;
	}

	&__loading,
	&__error,
	&__empty {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 32px 16px;
		text-align: center;

		p {
			margin: 0;
			font-size: 14px;
		}
	}

	&__loading {
		padding: 0;
	}

	&__empty-hint {
		opacity: 0.5;
		font-size: 12px;
		margin-top: 8px;
	}

	&__list {
		display: flex;
		flex-direction: column;
		width: 100%;
	}

	&__footer {
		flex-shrink: 0;
		padding: 8px 0;
	}

	&__new-chat-btn {
		width: 100%;
		background-color: #2d5af2;
		color: $white;
		border-radius: 4px;
		padding: 12px;
		font-size: 14px;
		letter-spacing: -0.154px;
		border: none;
		cursor: pointer;
		transition: background-color 0.2s ease;
		text-align: center;
		justify-content: center;

		&:hover {
			background-color: #2550e0;
		}

		&:focus {
			outline: 2px solid #2d5af2;
			outline-offset: 2px;
		}
	}
}
